<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
    <el-form :rules="rules" :model="form" ref="form" label-width="80px">
      <el-form-item label="栏目" prop="categoryId">
        <column-select
          ref="areaSelect"
          :selectValue="form.categoryId"
          v-model="form.categoryId"
          @select="handleDeptSelect"
        />
      </el-form-item>
      <el-form-item label="文章标识" prop="articleFlag">
        <el-select v-model="form.articleFlag" style="width: 100%">
          <el-option :value="1" label="头条" />
          <el-option :value="2" label="热门" />
          <el-option :value="3" label="推荐" />
          <el-option :value="4" label="普通" />
        </el-select>
      </el-form-item>
      <el-form-item label="文章名称" prop="articleName">
        <el-input v-model="form.articleName" placeholder="请输入文章名称" />
      </el-form-item>
      <el-form-item label="置顶" prop="upFlag">
        <el-radio-group v-model="form.upFlag" size="small">
          <el-radio-button :label="1">是</el-radio-button>
          <el-radio-button :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <quill-editor
          :show="form.content"
          ref="quillEditor"
          placeholder="请输入内容"
          @change="handleEditChange"
        />
        <!-- <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content" /> -->
      </el-form-item>
      <el-form-item label="内容简介" prop="contentBrief">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.contentBrief" />
      </el-form-item>
      <el-form-item label="发布者" prop="issuer">
        <el-input type="text" placeholder="请输入发布者" v-model="form.issuer" />
      </el-form-item>
      <el-form-item label="上传附件">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList"
          :on-remove="handleRemove"
          :http-request="customRequest"
          :on-change="handleChange"
        >
          <el-button>
            <i class="el-icon-upload" />点击选择文件上传
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="缩略图">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="imageList"
          :limit="1"
          list-type="picture-card"
          :on-remove="handleImageRemove"
          :http-request="imageRequest"
          :on-change="handleChange"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item align="center">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button @click="handleOk" type="primary">{{ bool ? '修改' : '新增' }}</el-button>
      </el-form-item>
    </el-form>
    <!-- <div slot="footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleOk" type="primary">确定</el-button>
    </div>-->
  </el-card>
</template>

<script>
import { updateArticle, createArticle } from '@/api/system'
import { saveOnlyUploads } from '@/api/supplier'
import { openNotification } from '@/utils/util'
import ColumnSelect from '../column/ColumnSelect'
import QuillEditor from '@/components/Editor/QuillEditor'

export default {
  components: {
    ColumnSelect,
    QuillEditor
  },
  data() {
    return {
      parentSelect: true,
      visible: false,
      isEdit: false,
      bool: this.$route.query.bool,
      form: {},
      rules: {
        articleName: [{ required: true, message: '请输入文章名称', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择栏目', trigger: 'blur' }],
        // articleFlag: [{ required: true, message: '请输入文章名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入文章名称', trigger: 'blur' }],
        contentBrief: [{ required: true, message: '请输入文章名称', trigger: 'blur' }]
      },
      confirmLoading: false,
      fileList: [],
      imageList: []
    }
  },
  methods: {
    handleEditChange(text, html) {
      //   console.log('editor change', text, html)
      this.$set(this.form, 'content', html)
    },
    reset() {
      this.$nextTick(() => {
        this.parentSelect = true
        this.$set(this.form, 'categoryId', null)
        this.$refs.areaSelect.reset()
      })
    },
    edit(bool, record) {
      console.log('edit', bool, record)
      this.isEdit = bool
      this.form = Object.assign({}, record)
      this.visible = true
      if (!bool) {
        this.$set(this.form, 'upFlag', 0)
      }
    },
    async handleOk(e) {
      e.stopPropagation()
      this.$refs.form.validate(async valid => {
        if (valid) {
          let mes = '',
            res = ''
          console.log('edit', this.isEdit)

          if (this.isEdit) {
            mes = '修改操作成功'
            res = await updateArticle(this.form)
          } else {
            mes = '新增操作成功'
            res = await createArticle(this.form)
          }
          if (res.state === '000000') {
            openNotification('success', mes)
            this.confirmLoading = false
            this.visible = false
            this.$router.push({
              name: 'cmsArticle'
            })
          }
        }
      })
    },
    handleCancel() {
      this.$nextTick(() => {
        this.visible = false
      })
    },
    handleDeptSelect(value) {
      console.log('value', value)

      this.$set(this.form, 'categoryId', value.id)
    },
    handleChange(file, fileList) {
      console.log('change', file, fileList)
      //   this.fileList = fileList.slice(-2)
    },
    // 删除图片事件处理
    handleRemove(file, fileList) {
      this.fileList = [...fileList]
    },
    handleImageRemove(file, fileList) {
      this.imageList = [...fileList]
    },
    // 上传图片事件处理
    customRequest(info, fileList) {
      console.log('customRequest', info, fileList)
      const formData = new FormData()
      formData.append('file', info.file)
      //   this.fileList = []
      saveOnlyUploads(formData).then(res => {
        if (res.data !== null) {
          const { data } = res
          this.fileList.push(data)
          // this.fileList[this.fileList.length - 1].status = 'done'
          this.fileList[this.fileList.length - 1].url = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].savePath = data.fileUrl + data.fileName
          this.fileList[this.fileList.length - 1].name = data.uploadTitle
          this.fileList[this.fileList.length - 1].attachmentName = data.uploadTitle

          console.log('fileList', this.fileList)
          this.$set(this.form, 'cmsAttachmentVOS', this.fileList)
        }
      })
    },
    // 上传缩略图事件处理
    imageRequest(info, fileList) {
      console.log('customRequest', info, fileList)
      const formData = new FormData()
      formData.append('file', info.file)
      this.imageList = []
      saveOnlyUploads(formData).then(res => {
        if (res.data !== null) {
          const { data } = res
          this.imageList.push(data)
          // this.fileList[this.fileList.length - 1].status = 'done'
          this.imageList[this.imageList.length - 1].url = data.fileUrl + data.fileName
          this.imageList[this.imageList.length - 1].savePath = data.fileUrl + data.fileName
          this.imageList[this.imageList.length - 1].name = data.uploadTitle
          this.imageList[this.imageList.length - 1].attachmentName = data.uploadTitle

          console.log('fileList', this.imageList)
          this.$set(this.form, 'thumbnail', data.uploadId)
        }
      })
    }
  },
  created() {
    let record = JSON.parse(this.$route.query.record)
    let bool = this.$route.query.bool

    console.log('record', record, bool)
    this.isEdit = bool
    this.form = Object.assign({}, record)
    this.visible = true
    if (!bool) {
      this.$set(this.form, 'upFlag', 0)
    } else {
      record.cmsAttachmentVOS.map(v => {
        v.name = v.attachmentName
        v.url = v.savePath
      })
      this.fileList = record.cmsAttachmentVOS
      console.log('fileList', this.fileList)

      if (record.savePath) {
        this.imageList = [{ url: record.savePath, name: '缩略图.jpg' }]
      }
    }
  }
}
</script>


